<template>
  <Card id="card-body" :style="'height:'+(height-140)+'px'">
    <Form inline :model="query_form" label-position="right" >
      <FormItem label="学生姓名:" style="display: inline-flex">
        <Input v-model="query_form.name" clearable placeholder="查询学生基本信息" style="width: 120px"/>
      </FormItem>
      <FormItem label="学生手机号码:" style="display: inline-flex">
        <Input v-model="query_form.phone" clearable placeholder="学生手机号码" style="width: 130px"/>
      </FormItem>
      <FormItem label="招生教师:" style="display: inline-flex">
        <Input v-model="query_form.teacherName" clearable placeholder="教师姓名" style="width: 120px"/>
      </FormItem>
      <FormItem style="display: inline-flex">
        <Button type="info" @click="btn_query">查询</Button>
        <Button type="success" @click="btn_add">新增</Button>
        <Button type="warning" @click="btn_export">导出</Button>
      </FormItem>
    </Form>
    {{detail.show}}
    <Modal
      v-model="detail.show"
      title="查看详情">
      <!--      @on-ok="ok"-->
      <!--      @on-cancel="cancel">-->
      <p>学生姓名：{{detail.info.username}}</p>
      <p>教师姓名：{{detail.info.teacherName}}</p>
      <p>报考专业：{{detail.info.major}}</p>
      <p>毕业学校：{{detail.info.school}}</p>
      <p>学生手机：{{detail.info.phone}}</p>
      <p>时间：{{detail.info.updateTime}}</p>

    </Modal>
    <Modal
      v-model="amend.show"
      title="查看详情">
      <!--      @on-ok="ok"-->
      <!--      @on-cancel="cancel">-->
      学生姓名: <Input v-model="amend.info.username" placeholder="Enter something..." clearable style="width: 200px" /><br>
      教师姓名: <Input v-model="amend.info.teacherName" placeholder="Enter something..." clearable style="width: 200px" /><br>
      报考专业: <Input v-model="amend.info.major" placeholder="Enter something..." clearable style="width: 200px" /><br>
      毕业学校: <Input v-model="amend.info.school" placeholder="Enter something..." clearable style="width: 200px" /><br>
      学生手机: <Input v-model="amend.info.phone" placeholder="Enter something..." clearable style="width: 200px" /><br>
      报名时间: <Input v-model="amend.info.createTime" placeholder="Enter something..." clearable style="width: 200px" />
    </Modal>
    <student_add :info="add" @update_table="listTableDate"></student_add>
    <Table :columns="table.columns" :data="table.data" :loading="table.loading" :total="table.count" :height="height-260" stripe border/>
    <Page size="small" :total="table.count" :current="table.page" :page-size="table.pageSize"
          @on-change="chgPage" @on-page-size-change="chgPageSize" show-sizer show-total style="margin-top: 16px;"></Page>
  </Card>
</template>

<script>
import { post, baseUrl} from '@/libs/axios-cfg'
import { formatDate } from '@/libs/util'
import student_add from "./components/student_add";
export default {
  name: "info",
  components: {student_add},
  data() {
    return {
      height: 100,
      query_form: {
        name: '',
        teacherName: '',
        phone: ''
      },
      add: {
        show: false
      },
      detail: {
        show: false,
        info: ''
      },
      amend:{
        show: false,
        info: ''
      },
      table: {
        loading: false,
        page: 1,
        pageSize: 10,
        count: 0,
        data: [],
        columns: [
          // {
          //   title: 'ID',
          //   key: 'id',
          //   minWidth: 60,
          //   align: 'center'
          // },
          {
            title: '学生姓名',
            key: 'username',
            minWidth: 120,
            align: 'center'
          },
          {
            title: '招生教师',
            key: 'teacherName',
            minWidth: 120,
            align: 'center'
          },
          {
            title: '报考专业',
            key: 'major',
            minWidth: 130,
            align: 'center'
          },
          {
            title: '毕业学校',
            key: 'school',
            minWidth: 120,
            align: 'center'
          },
          {
            title: '学生手机',
            key: 'phone',
            minWidth: 120,
            align: 'center'
          },
          {
            title: '报名时间',
            key: 'createTime',
            align: 'center',
            minWidth: 180,
            render: function (h, params) {
              return h('div', formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm:ss'))
            }
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 190,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showDetail(params.row);
                    }
                  }
                }, '查看'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small',
                    // icon:"ios-download-outline",
                  },
                  style: {
                    // marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.update(params.row);
                    }
                  }
                }, '更新'),
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: '您确定要删除该学生吗?',
                    placement: 'left',
                  },
                  on: {
                    'on-ok': () => {
                      this.delete(params.row);
                    },
                  },
                }, [
                  h('Button', {
                    style: {
                      // margin: '0 2px',
                      marginLeft: '2px',
                    },
                    props: {
                      type: 'error',
                      size: 'small',
                      disabled: params.row.status === 2 ? true : false
                    },
                  }, '删除'),
                ])
              ])
            }
          } // end 操作
        ],//end columns
      }// end table
    }
  },
  methods: {
    btn_query() {
      console.log("btn_query");
      this.listTableDate(this.table.page, this.table.pageSize);
    },
    btn_export() {
      const a = document.createElement('a')
      //给a标签设置链接属性
      a.href = baseUrl + '/rank/student/export?teacherNo='+this.query_form.teacherName;
      //调用点击事件
      a.click();
    },
    btn_add() {
      console.log("btn_add");
      this.add.show = true;
    },
    showDetail(param) {
      console.log("showDetail + ", param);
      this.detail.show = true;
      this.detail.info = param;

    },
    update(param) {
      console.log("update + ", param);
      this.amend.show = true;
      this.amend.info = param;
    },
    delete(param) {

    },
    chgPageSize(pageSize) {
      this.table.pageSize = pageSize;
      this.listTableDate(this.table.page, this.table.pageSize);
    },
    chgPage(page) {
      this.table.page = page;
      this.listTableDate(this.table.page, this.table.pageSize);
    },
    async listTableDate (page=this.table.page, pageSize=this.table.pageSize) {
      try {
        this.table.loading = true;
        let res = await post('/rank/student/list', {
          username: this.query_form.name,
          teacherName: this.query_form.teacherName,
          phone: this.query_form.phone,
          page: page,
          pageSize: pageSize
        });
        this.table.data = res.data.records;
        this.table.all_data = res.data.records;
        this.table.count = res.data.total;
        // if (this.table.count >= 1) {
        //   this.chgPage(1);
        // }
      } catch (error) {
        this.$throw(error)
      } finally {
        this.table.loading = false;
      }
    }
  },
  created() {
    this.height = document.body.clientHeight;
    this.listTableDate();
  }
}
</script>

<style scoped>

</style>
